<style scoped>
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
</style>

<template>
    <div class="company">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>添加物流公司信息</legend>
        </fieldset>

        <form class="layui-form " >
            <input type="hidden" name="type" value="3" class="layui-input">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" :value="customer.name"  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">法人</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="legal" :value="customer.legal"   placeholder="" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">请选择地区</label>
                <div class="layui-inline" style="width: 155px">
                    <select name="province" id="province" lay-verify="required"   lay-search lay-filter="province">
                        <option value="">省份</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 155px">
                    <select name="city" id="city" lay-verify="required"    lay-search lay-filter="city">

                    </select>
                </div>
                <div class="layui-inline" style="width: 161px">
                    <select name="district" id="district" lay-verify="required"    lay-search>

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细地址:</label>
                <div class="layui-input-block">
                    <input type="text" :value="customer.address" name="address" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商务人员</label>
                <div class="layui-input-block">
                    <input type="text" name="manager" required :value="customer.manager"   placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">商务电话</label>
                <div class="layui-input-block">
                    <input type="text" name="managertel" required :value="customer.managertel"    placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商务邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="memail" :value="customer.memail"  placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>


<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">收货人</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="contact" :value="customer.contact"  placeholder="" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">收货电话</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="contactno" :value="customer.contactno"   placeholder="" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->



<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">财务人员</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="financer" required :value="customer.financer"  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->


<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">财务电话</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="fintel" required :value="customer.fintel"  lay-verify="phone" placeholder="" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">财务邮箱</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="finemail"   :value="customer.finemail" required  lay-verify="email" placeholder="" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->


<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">注册资金</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="registcapital" :value="customer.registcapital"   placeholder="" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">应收账款</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="recbalance" :value="customer.recbalance"    placeholder="" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">应付账款</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="payBalance" :value="customer.paybalance"   placeholder="" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">余额</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="prebalance" :value="customer.prebalance"    placeholder="" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->



            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" :value="customer.remark"  placeholder="请输入备注内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                    <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    let qs = require('qs');
    export default {

        name: 'CustomerAdd',
        data () {
            return {
                 adata: {},
                datacategory:{},
                typeEmnu:[],
                costincomeEmnu:[],
                customer:[]
            }
        },
        mounted() {
            let that = this;
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;

                   that.getDictEmnu();
                //提交编辑过的数据
                form.on('submit(submit)', function (data) {
                    let loader = layer.load();
                    $.ajax({
                        url: '/sales/Customer!save.action',
                        data: data.field,
                        type: "post",
                        dataType: "json",
                        success: function(res) {
                            if (res.msg == "success") {
                                that.toast("添加成功");
                                that.$parent.switchPage('WlcompanyList');
                            }  else{
                                that.toast("系统错误");
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });
                    return false;
                });
            });

            layui.use('form', function() {
                var form = layui.form;

                var province = $("#province"),
                    city = $("#city"),
                    district = $("#district");

                //初始将省份数据赋予
                for (var i = 0; i < provinceList.length; i++) {
                    addEle(province, provinceList[i].name);
                }

                //赋予完成 重新渲染select
                form.render('select');

                //向select中 追加内容
                function addEle(ele, value) {
                    var optionStr = "";
                    optionStr = "<option value=" + value + " >" + value + "</option>";
                    ele.append(optionStr);
                }

                //移除select中所有项 赋予初始值
                function removeEle(ele) {
                    ele.find("option").remove();
                    var optionStar = "<option value=" + "" + ">" + "请选择" + "</option>";
                    ele.append(optionStar);
                }

                var provinceText,
                    cityText,
                    cityItem;

                //选定省份后 将该省份的数据读取追加上
                form.on('select(province)', function(data) {
                    provinceText = data.value;
                    $.each(provinceList, function(i, item) {
                        if (provinceText == item.name) {
                            cityItem = i;
                            return cityItem;
                        }
                    });
                    removeEle(city);
                    removeEle(district);
                    $.each(provinceList[cityItem].cityList, function(i, item) {
                        addEle(city, item.name);
                    })
                    //重新渲染select
                    form.render('select');
                })

                ////选定市或直辖县后 将对应的数据读取追加上
                form.on('select(city)', function(data) {
                    cityText = data.value;
                    removeEle(district);
                    $.each(provinceList, function(i, item) {
                        if (provinceText == item.name) {
                            cityItem = i;
                            return cityItem;
                        }
                    });
                    $.each(provinceList[cityItem].cityList, function(i, item) {
                        if (cityText == item.name) {
                            for (var n = 0; n < item.areaList.length; n++) {
                                addEle(district, item.areaList[n]);
                            }
                        }
                    })
                    //重新渲染select
                    form.render('select');
                })



            });



        },
        updated: function () {
            layui.form.render('select');
            layui.form.render();
        },
        methods: {
            back: function () {
                this.$parent.switchPage(this.$parent.refView);
            },
            /**
             * 2020-3-30
             * Liukx
             * 添加管理类型
             */
            getDictEmnu: function() {
                this.$post('/sales/Customer!getDictEmnu.action')
                    .then(response => {
                        let data = response.data;
                        if (data.info != 'error') {
                            this.typeEmnu = data.info== null?"":data.info;
                        } else {
                            this.toast('获取管理类型失败！');
                        }
                    })
            },
        }
    }
</script>
